<script setup lang="ts">
import { ref } from 'vue'

const filters=ref([
  {
    name:'新品',
    value:'new',
    sort:-1,
    active:false
  },{
    name:'精品',
    value:'best',
    sort:0,
    active:false
  },{
    name:'价格',
    value:'price',
    sort:0,
    active:false
  },{
    name:'销量',
    value:'sale',
    sort:0,
    active:false
  },{
    name:'现货',
    value:'spot',
    sort:0,
    active:false
  }
])
const changeSort=(item) =>{
  filters.value.map(val =>{
    if(val.value!=item.value){
      val.active=false
      val.sort=0
    }
  })
  item.active=true
  item.sort=item.sort==-1?1:-1
  emit('change',item)
}
changeSort(filters.value[0])
const emit=defineEmits<{
  (e: 'change', val: any): void,
}>()
</script>

<template>
  <div class="hide-scrollbar"
    w:w="full"
    w:overflow="scroll"
  >
    <div
      w:h="20"
      w:w="max-content"
      w:bg="light-50"
      w:flex="~ nowrap"
      w:align="items-center"
      w:border="b-2 solid gray-300"
    >
      <div v-for="(item,idx) in filters" :key="idx" @click="changeSort(item)"
        w:p="x-12"
        w:flex="~ nowrap none"
        w:align="items-center"
      >
        <div :class="{'text-red-500': item.active}"
          w:font="bold"
        >{{item.name}}</div>
        <div>
          <div class="iconfont icon-arrow-sort" :class="{'text-red-600': item.sort==-1}"
            w:text="xl"
            w:m="l-2 -b-3"
            w:transform="~ rotate-z-180"
          ></div>
          <div class="iconfont icon-arrow-sort" :class="{'text-red-600': item.sort==1}"
            w:text="xl"
            w:m="l-2 -t-3"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>